import React, { Component } from 'react';
import { Row, Col, Drawer, Form, Input } from 'antd';
import { connect } from 'react-redux';
import {
    createChangeMoney,
    createAddCommodity
} from '../../../../redux/action/cashier_orderItem_action'





class CashierOrderItem extends Component {
    state = { visible: false };

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,

        });
        const { value: countI } = this.countInput.state
        const { value: moneyI } = this.moneyInput.state
        this.props.changeMoney({ changeRow: this.props.rowID, count: parseInt(countI), money: parseFloat(moneyI) })
    };
    render() {
        const { rowID, cname, price, count } = this.props


        return (
            <div onDoubleClick={this.showDrawer}  >

                <>
                    <Drawer
                        title="改价"
                        width={300}
                        onClose={this.onClose}
                        visible={this.state.visible}
                        bodyStyle={{ paddingBottom: 80 }}
                    >
                        <Form layout="vertical" hideRequiredMark initialValues={{ 'count': count, 'price': price }}>
                            <Form.Item name="count" label="数量">
                                <Input
                                    ref={(input) => this.countInput = input}
                                // onChange={this.countInput.setValue()}
                                // defaultValue ={count}
                                // onChange={(e) =>}
                                />
                            </Form.Item>
                            <Form.Item name="price" label="金额">
                                <Input

                                    ref={(input) => this.moneyInput = input} />
                            </Form.Item>
                        </Form>
                    </Drawer>
                </>
                <Row
                    onClick={(i) => { this.props.selectItem({obj:i.currentTarget,row:rowID})}}
                    className="CashierOrderItem">
                    <Col span={4}>
                        <div className="CashierOrderItemText">{rowID}</div>
                    </Col>
                    <Col span={6}>
                        <div className="CashierOrderItemText">{cname}</div>
                    </Col>
                    <Col span={6}>
                        <div className="CashierOrderItemText">{price.toFixed(2)}</div>
                    </Col>
                    <Col span={4}>
                        <div className="CashierOrderItemText">{count}</div>
                    </Col>
                    <Col span={4}>
                        <div className="CashierOrderItemText">{(price * count).toFixed(2)}</div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default connect(
    status => ({}),
    {
        changeMoney: createChangeMoney,
        addCommodity: createAddCommodity
    }
)(CashierOrderItem);
